<template>
  <article class="page full-page">
    <headerbar
      style="display: block"
      @onback="onback"
      class="no-bg header-wrap-wrap"
    ></headerbar>
    <section class="full-page bg-default">
      <div class="video-wrap full-page bg-black" id="videoPlayer_101">
        <cube-slide
          :threshold="0.1"
          :showDots="false"
          :autoPlay="false"
          :direction="'vertical'"
          :loop="false"
          :style="{ width: '100vw' }"
          ref="slide"
          :data="list"
          @change="changePage"
        >
          <cube-slide-item
            :style="{ width: '100vw' }"
            v-for="(item, idx) in list"
            :key="'item101' + idx"
            @click.native="clickHandler(item, idx)"
          >
            <videoItem
              @onplay="onplay"
              @ended="ended"
              @focus="focus"
              :focusTime="focusTime"
              :currentVideoIndex="currentVideoIndex"
              :data="item"
              :index="idx"
              videoPlayerIndex="101"
              :isDormancy="isDormancy"
            ></videoItem>
          </cube-slide-item>
        </cube-slide>
      </div>
    </section>
    <readScore
      ref="scoreInstance"
      :_contentId="currentContentId"
      :type="2"
    ></readScore>
  </article>
</template>


<script>
import likeUpsComponent from "@/components/common/likeUpsComponent.vue";
import videoItem from "./videoItem.vue";
import $ from "../../../../../static/js/jquery-1.12.4.min";
export default {
  components: { likeUpsComponent, videoItem },
  name: "douyin",
  data() {
    return {
      isShow: false,
      playing: false,
      isFullScreen: false,
      list: [],
      files: [],
      attachmentList: [],
      channelId: "19a64c36d6ff4442948bb99bb1a06e77",
      currentIndex: "",
      currentContentId: "",
      currentVideoIndex: 0,
      scrollHeight: "300",
      quickScrollHeight: "30",
      scrollDuration: "300",
      clickDuration: "10",
      clickDistance: "30",
      pageIndex: 1,
      pageSize: 10,
      focusTime: 30,
      detail: {},
      navIds: {
        1: "19a64c36d6ff4442948bb99bb1a06e77",
        2: "d848e28cd5a14617be976be23efed142",
        3: "7f14dd4a9b7246abbf9d1a750a2a42e3",
      },
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      userInfo: {},
      isDormancy: false, //是否休眠，目前只有playerOne.vue用到
    };
  },
  created() {
    window.audioPlayer.pause();
    this.userInfo = this.$localStorage.get("userInfo");
    //      this.fetchList
    this.isShow = true;
    this.clickMenu(1);
  },
  beforeDestroy() {
    this.onback();
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.scoreInstance.stopRead();
    console.log("beforeRouteLeave");
    this.isShow = false;
    if (window.douyinCommentInstance) {
      window.douyinCommentInstance.back();
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    //      this.isShow = true
    console.log("beforeRouteEnter");
    next();
  },
  methods: {
    focus() {
      this.focusTime = Date.now();
    },
    clickHandler() {},
    play(e) {
      e.target.play();
    },
    onplay(e) {
      this.addScore(this.currentVideoIndex);
    },
    addHomeTop() {},
    goUserInfo() {
      if (this.detail.createUser) {
        this.$router.push({
          name: "microVideo",
          query: { userId: this.detail.createUser },
        });
      }
    },
    getUserName(item) {
      return (
        item.detail.newsContent.nickname ||
        item.detail.newsContent.createUserName ||
        item.createUserName ||
        "未知"
      );
    },
    getVideoTitle(item) {
      return item.detail && item.detail.newsContent.title;
    },
    goDetail(item) {
      let currentIndex = parseInt(this.currentIndex);
      if ((currentIndex === 2 || currentIndex === 3) && item.zhuanji === 1) {
        this.$store.state.longVideoList = item;
        this.$router.push({ name: "longVideoList", query: { id: item.id } });
      } else {
        this.$store.state.videoDetail = item;
        this.$store.state.newsDetail = item;
        this.$router.push({ name: "videoDetail", query: { id: item.id } });
      }
    },
    getPoster(item) {
      return this.tools.getImgUrl(item.listPic);
    },
    onback() {
      $(".video-player-item").attr('id','videoItem_pause');
      let videos = document.querySelectorAll("video");
      for (let i = 0; i < videos.length; i++) {
        videos[i].pause();
        setTimeout(() => {
          videos[i].remove();
        }, 50);
      }
    },
    playVideo(index) {
      let videos = document.querySelectorAll("video");
      if (videos.length < 1) {
        return false;
      }
      for (let i = 0; i < videos.length; i++) {
        /* videos[i].style.opacity = 0;
        videos[i].pause(); */
        videos[i].pause();
        videos[i].style.display = "none";
      }
      if (index >= videos.length) {
        this.$store.state.newsDetail = this.detail = this.list[index - 1];
        index = videos.length - 1;
      }
      //        this.$store.state.newsDetail = this.detail = this.list[index]
      videos[index].style.display = "block";
      videos[index].play();
    },
    changePage(currIndex) {
      this.currentVideoIndex = currIndex;
      console.log("当前轮播图序号为:" + currIndex);
      this.playVideo(currIndex);
      if (this.list.length - currIndex < 15) {
        this.fetchList();
      }
    },
    viewVideo(index) {
      setTimeout(() => {
        if (this.$refs.slide) {
          this.$refs.slide.slide.goToPage(0, index, 0);
        }
      }, 0);
    },
    /*添加积分*/
    addScore(index) {
      let len = this.list.length;
      if (index >= len) {
        index = len - 1;
      }
      let content = this.list[index];
      console.log("video content", content);
      this.currentContentId = content.id;
      this.$nextTick(() => {
        this.$refs.scoreInstance.startRead();
      });
    },
    /*视频播放结束时触发*/
    ended() {
      this.$refs.scoreInstance.getScore("watch");
    },
    clickMenu(index) {
      if (this.$route.query.index !== index) {
        this.$router.replace({
          path: this.$route.name,
          query: { index: index },
        });
      }
      /*if (this.currentIndex === index) {
          return
        }*/
      this.playing = false;
      this.currentIndex = index;
      index = parseInt(index);
      this.$store.state.isVideo = true;
      if (index === 3) {
        this.$store.state.isVideo = false;
      }
      this.tools.playAudio(); 
      if (index == 1) {
        this.tools.stopAudio();
        /* setTimeout(() => {
            this.scrollHeight = document.querySelector('.video-wrap').clientHeight
          }, 0)*/
      }
      this.channelId = this.navIds[index];
      this.pageIndex = 1;
      this.list = [];
      this.fetchList(this.channelId);
    },
    fetchList(id) {
      id = id || this.channelId;
      let data = {
        excludeIds: this.$store.state.douyinExcludeIds,
        channelId: id || "",
        pageNo: this.pageIndex + "",
        pageSize: this.pageSize + "",
      };
      return this.fetchService.contentPage(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        if (this.pageIndex === 1) {
          this.detail = res.data.page[0];
        }
        this.list = this.list.concat(
          this.excludeIds(res.data.page, this.$store.state.douyinExcludeIds)
        );
        this.pageIndex++;
        // 跳转到对应视频
        this.viewVideo(this.currentVideoIndex);
      });
    },
    excludeIds(list, arrExcludeIds) {
      let ret = [];
      if (!arrExcludeIds) {
        return list;
      }
      list.forEach((v) => {
        if (!arrExcludeIds.includes(v.id)) {
          ret.push(v);
        }
      });
      return ret;
    },
    getVideoSrc(item) {
      return this.tools.getImgUrl(item.detail.files[0].fileId);
    },
    hasList() {
      return this.list.length > 0;
    },
    onPullingUp() {
      if (this.currentIndex === "2") {
        this.bigVideoPage().then((res) => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
            this.options.isPullUpLoad = false;
          }, 100);
        });
      } else if (this.currentIndex === "3") {
        this.fmPage().then((res) => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
            this.options.isPullUpLoad = false;
          }, 100);
        });
      } else {
        this.fetchList().then((res) => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
            this.options.isPullUpLoad = false;
          }, 100);
        });
      }
    },
    getRole() {
      if (this.userInfo.type === "10") {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>


<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
*::-webkit-media-controls-start-playback-button {
  display: block;
  -webkit-appearance: block;
}
*::-webkit-media-controls-panel {
  display: block;
  -webkit-appearance: block;
}

*::--webkit-media-controls-play-button {
  display: block;
  -webkit-appearance: block;
}
.video {
  video {
    /*opacity: 0;*/
  }
  .poster {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    overflow: hidden;
    background-color: $theme-color;
    img {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: auto;
    }
  }
  .self {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    .left-bar {
      position: absolute;
    }
  }
}
.full-page {
  padding: 0;
  height: 100vh;
  .head-wrap,
  .top-menu,
  .btn-menu {
    display: none;
  }
  .cube-slide-group,
  .cube-slide-item,
  .video {
    height: 100vh !important;
  }
}
.video-wrap .video .video-title {
  width: 70%;
}
</style>

